
<template>
 <div class=" flex-1 overflow-auto">
            <!-- 最受好评的 -->
            <div class="outer-praise-box">
                <p class="title">最受好评的电影</p>
                <div class="praise-box">
                    <div class="praise-box-item" v-for="(item)  in praiseMovieList" :key="item.id">
                        <div class="img-box">
                            <img :src="baseURL + item.movie_pc" alt="">
                            <p class="score">观众评分：{{ item.movie_score }}</p>
                        </div>
                        <div class="movie-name">{{ item.movie_name }}</div>
                    </div>
                </div>
            </div>
            <!-- 电影列表 -->
            <hotMovieList></hotMovieList>
        </div>
</template>
<script setup>
import hotMovieList from "../components/hotMovieList.vue" 
import { ref, reactive } from "vue";
import API from "../utils/API/index.js";
let baseURL = ref("http://www.softeem.xin:9999");

//获取最受好评的电影
const praiseMovieList = ref([])
API.movieInfo.getPraiseMovie().then(result => {
    //返回拦截器返回的数据
    praiseMovieList.value = result;
}).catch(error => {
    console.log(error);
})

</script>
<style scoped lang="scss">
@import "../assets/scss/comm.scss";
.movie-page {
    width: 100%;
    height: 100%;
    overflow: auto;
}

.type-tag {
    font-size: 14px;
    font-weight: bold;
    color: #666666;
    list-style-type: none;
    display: flex;
    border-bottom: 1px solid lightgray;
    height: 45px;

    li {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 0px 8px;
        position: relative;

        &.active {
            font-size: 16px;
            color: #333333;

            &::after {
                //在选中的模块正下方添加内容
                content: "";
                position: absolute;
                width: 24px;
                height: 2px;
                bottom: 2px;
                background-color: $primaryColor;

            }
        }
    }

    position: relative;

    .right-search-icon {
        position: absolute;
        right: 0px;
        height: 100%;

        img {
            width: 20px;
            height: 20px;
        }
    }
}

.outer-praise-box {
    padding: 5px 10px;

    .title {
        font-size: 12px;
        color: #333333;
        margin: 5px 0;
    }

    .praise-box {
        display: flex;
        flex-direction: row;
        overflow: auto;

        &::-webkit-scrollbar {
            //隐藏滚动条
            display: none;
        }

        .praise-box-item {
            width: 90px;

            &:not(:first-child) {
                //排除第一个元素，后面都添加10培训的左外边距
                margin-left: 10px;
            }

            .img-box {
                width: 90px;
                height: 118px;
                position: relative;

                img {
                    width: 100%;
                    height: 100%;
                }

                .score {
                    color: $warningColor;
                    font-size: 12px;
                    font-weight: bold;
                    position: absolute;
                    bottom: 2px;
                    left: 2px;
                }


            }
        }

        .movie-name {
            font-size: 12px;
            font-weight: bold;
            //文字超出省略的步骤
            //文字不换行
            white-space: nowrap;
            //溢出隐藏
            overflow: hidden;
            //如果是文字溢出了，就给省略号
            text-overflow: ellipsis;
            padding: 5px 0;
        }
    }
}

.hr {
    height: 7px;
    background-color: #f5f5f5;
}
</style>